<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>乐章</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/header.css"/>
    <style>
        .song-control{ background: skyblue; width: 100%; min-height: 100px; }
        .playutil { height: 100px; width:100%; position:relative; }
        .control>p { 
            width: 50px; height:56px; text-align: center; float:left; line-height:56px; margin-top: 25px; }
        .buttons { text-align: center; float:left; margin-top: 25px;}
        .buttons a {
            margin: 8px 20px 0px 40px; width: 38px; height: 38px; border-radius: 50%; 
            border: 1px solid #e5e5e5; display: block;
            line-height: 38px; text-align: center; background: #fff; float: left;
        }
        .buttons a img{ 
            width:16px; height:16px; vertical-align: middle;
            margin-bottom: 2px; margin-left: 1px;
        }
        .progressBar{
            float: left; margin-left: 22px; margin-right: 22px; margin-top: 48px; width: 940px;
            height: 8px; background: #d3ede0; border-radius:20px; 
        }
        .progressBar .progressBar-passed{
            float:left; width: 0; height: 8px; background: #109d59; border-radius: 20px 0 0 20px;
        }
        .progressBar .progressBar-remain{ 
            float:right; width: 100%; height: 8px; background: #d3ede0; border-radius:20px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-logo"></div>
    <div class="header-navi">
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="yz.html">乐章</a></li>
            <li><a href="#">听说</a></li>
            <li><a href="#">乐趣</a></li>
            <li><a href="#">聊聊</a></li>
            <li><a href="#">游记</a></li>
            <li><a href="#">摄影</a></li>
            <li><a href="#">诚品</a></li>
            <li><a href="#">蓝莓酱</a></li>
            <li><a href="#">社区</a></li>
        </ul>
    </div>
    <div class="header-menu">
        <div class="he-me-input">
            <input type="text"/>
            <div class="input-btn"></div>
        </div>
        <a href="#">登录</a>
        <a href="#">注册</a>
    </div>
</div>
<!-- 音乐播放控制 -->
<div class="song-control">
    <!--开始设置播放器-->
    <div class="playutil">
        <audio id="aud" src='resource/mo.mp3'></audio>
        <!--播放按钮-->
        <div class="control clearFix">
            <div class="buttons">
                <a id="playbtn">
                    <img id="playbutton" src="resource/play.png"/>
                </a>
            </div>
            <p id="passTime">00:00</p>
            <div class="progressBar clearFix">
                <div class="progressBar-passed"></div>
                <div class="progressBar-remain"></div>
            </div>
            <p id="totalTime">00:00</p>
        </div>
    </div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/header.js"></script>
<script>
    /*
        audio标签必要属性
        (1)audio.paused 本属性是音频标签的固有属性，表示当前正在播放还是暂停
             可选值为false和true
             如果是true表示当前暂停，如果是false表示当前正在播放

            说明：本属性不能赋值，只能读取
            说明：状态的变更由 play()方法和pause()方法来变更

        (2)audio.loop 本属性表示音频播放是否循环
              默认是false表示播放一遍后自动停止
              设置为true，则会自动循环播放

        (3)audio.currentTime 音频已经播放的时间
               可读可写的属性
               本属性默认表示已经播放的时间
               而设置秒数则表示从哪里开始播放
               eg：audio.currentTime = 67;
        (4)audio.duration 音频整体时间
               duration属性只能在播放之后才获取，播放之前本属性值为NAN
    */
    //处理时间显示的函数
    function checkTime(min, sec){
        if(min<10){
            min = '0'+min;
        }else{
            min += ''; 
        }
        //
        if(sec<10){
            sec = '0'+sec;
        }else{
            sec+='';
        }
        //
        return min+':'+sec;
    }

    //创建播放定时器
    var timer = null;
    $('#playbtn').click(function (){
        //先获取音频标签，将jqery转换成JS代码
        var aud = $('#aud')[0];
        //处理播放状态
        if(aud.paused){
            //当前暂停，点击后播放
            aud.play();
            aud.loop = true;
            //将定时器打开，并逐秒改变状态
            timer = setInterval(function (){
                //每一秒都更新播放显示内容
                //整体时间计算
                var duration_m = Math.floor(aud.duration/60);
                var duration_s = Math.floor(aud.duration%60);
                //已经播放时间计算
                var current_m = Math.floor(aud.currentTime/60);
                var current_s = Math.floor(aud.currentTime%60);
                //显示到页面中
                $('#passTime').html(checkTime(current_m, current_s));
                $('#totalTime').html(checkTime(duration_m, duration_s));
                //进度条
                var passPercentage = aud.currentTime/aud.duration;
                var remainPercentage = (aud.duration-aud.currentTime)/aud.duration;
                //
                if((aud.duration-aud.currentTime)>0){
                    //意味着还没播放完
                    $('.progressBar-passed').width(passPercentage*100+'%');
                    $('.progressBar-remain').width(remainPercentage*100+'%');
                }else{
                    //意味着已经播放完
                    $('.progressBar-passed').width('0%');
                    $('.progressBar-remain').width('100%');
                    aud.play();
                }
            },1000);
            //并且按钮标志应当变为【暂停标志】
            $('#playbutton').attr('src', 'resource/pause.png');
        }else{
            //当前播放，点击后暂停
            aud.pause();
            //如果是暂停，则清除定时器
            clearInterval(timer);
            //并且按钮标志应当变为【播放标志】
            $('#playbutton').attr('src', 'resource/play.png');
        }
    });
</script>
</body>
</html>